<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="js,es6,">










<meta name="description" content="&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ES6，全称ECMAScript6.0，是JavaScript的版本标准。 ES6主要是为了解决ES5的先天不足，比如JavaScript里并没有类的概念。">
<meta name="keywords" content="js,es6">
<meta property="og:type" content="article">
<meta property="og:title" content="ES6新增">
<meta property="og:url" content="https://shellingfordly.gitee.io/2019/10/03/ES6新增/index.html">
<meta property="og:site_name" content="shelllingfordly">
<meta property="og:description" content="&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ES6，全称ECMAScript6.0，是JavaScript的版本标准。 ES6主要是为了解决ES5的先天不足，比如JavaScript里并没有类的概念。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2019-10-09T09:15:23.446Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ES6新增">
<meta name="twitter:description" content="&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; ES6，全称ECMAScript6.0，是JavaScript的版本标准。 ES6主要是为了解决ES5的先天不足，比如JavaScript里并没有类的概念。">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://shellingfordly.gitee.io/2019/10/03/ES6新增/">





  <title>ES6新增 | shelllingfordly</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">shelllingfordly</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">人生本就是一场孤独的旅行</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-首页">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-归档">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-分类">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-标签">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-评论区">
          <a href="/comment" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-comment"></i> <br>
            
            评论区
          </a>
        </li>
      
        
        <li class="menu-item menu-item-关于我">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://shellingfordly.gitee.io/2019/10/03/ES6新增/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shellingford ly">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/uploads/images/header.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="shelllingfordly">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">ES6新增</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-10-03T23:17:26+08:00">
                2019-10-03
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/学习/" itemprop="url" rel="index">
                    <span itemprop="name">学习</span>
                  </a>
                </span>

                
                
                  ， 
                
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/学习/js/" itemprop="url" rel="index">
                    <span itemprop="name">js</span>
                  </a>
                </span>

                
                
                  ， 
                
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/学习/js/es6/" itemprop="url" rel="index">
                    <span itemprop="name">es6</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2019/10/03/ES6新增/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2019/10/03/ES6新增/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>次
            </span>
          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <span>
&nbsp;&nbsp;&nbsp;&nbsp;
ES6，全称ECMAScript6.0，是JavaScript的版本标准。
ES6主要是为了解决ES5的先天不足，比如JavaScript里并没有类的概念。
</span>

<a id="more"></a>


<h2 id="变量声明"><a href="#变量声明" class="headerlink" title="变量声明"></a>变量声明</h2><h3 id="声明方式"><a href="#声明方式" class="headerlink" title="声明方式"></a>声明方式</h3><h4 id="es5"><a href="#es5" class="headerlink" title="es5"></a>es5</h4><ul>
<li>ver</li>
<li>function</li>
</ul>
<h4 id="es6"><a href="#es6" class="headerlink" title="es6"></a>es6</h4><ul>
<li>var</li>
<li>function</li>
<li>let</li>
<li>const</li>
<li>class</li>
<li>import</li>
</ul>
<h4 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h4><ul>
<li>var<ul>
<li>会变量提升, 当在赋值前访问变量时返回undefined</li>
<li>全局下声明时变量会挂载到顶层对象window上, 污染环境</li>
<li>允许同名变量声明, 后面的会覆盖前面的</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// undefined</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.a); <span class="comment">// 1</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>; </span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>let const class import</p>
<ul>
<li>没有变量提升, 提前访问报错 — 暂时性死区</li>
<li>不会挂载到window上污染环境</li>
<li>同一个作用域中不允许同名声明</li>
</ul>
</li>
<li><p>暂时性死区<br>在作用域到let声明前都是暂时性死区</p>
</li>
</ul>
<h3 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h3><ul>
<li>全局作用域</li>
<li>函数作用域</li>
<li>块作用域</li>
</ul>
<p>在es6中, 每一个”{}”都是一个作用域, 外面访问不到里面的变量, 如 if中 for中 都回形成一个块作用域</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>; i&lt;<span class="number">3</span>; i++)&#123;</span><br><span class="line">	aLi[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="comment">// 每一个 i 存在于自己的作用域中 </span></span><br><span class="line">		<span class="comment">// 不会像 var 一样所有的 i 都为3, 需要通过为aLi元素绑定属性的方法来获取到 i 的值</span></span><br><span class="line">		<span class="built_in">console</span>.log(i); <span class="comment">// 0 1 2</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>形参的顺序</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params">x=y, y=<span class="number">2</span> </span>)</span>&#123;&#125;</span><br><span class="line"><span class="comment">// 报错, y is not defined</span></span><br><span class="line"><span class="comment">// y需要在x前声明</span></span><br></pre></td></tr></table></figure>

<h3 id="常量"><a href="#常量" class="headerlink" title="常量"></a>常量</h3><ul>
<li>声明时必须赋值</li>
<li>且不允许二次赋值</li>
<li>应用型变量, 对其添加元素则可以<ul>
<li>可以理解为指向不变, 只改变了其内容</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [];</span><br><span class="line">arr.push(<span class="string">"1"</span>)</span><br></pre></td></tr></table></figure>

<h3 id="解构模式"><a href="#解构模式" class="headerlink" title="解构模式"></a>解构模式</h3><ul>
<li>模式匹配 — 相同结构模式对应赋值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [a,b,c,d] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line"><span class="comment">// abcd分别为1234</span></span><br><span class="line"><span class="keyword">let</span> [a,b,c,d] = [<span class="number">1</span>,<span class="number">2</span>];</span><br><span class="line"><span class="comment">// cd为undefined</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">	a: <span class="number">1</span>,</span><br><span class="line">	b: <span class="number">2</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">let</span> &#123;a,b&#125; = obj;</span><br><span class="line"><span class="comment">// 匹配同名属性, 匹配不到为undefined</span></span><br><span class="line"><span class="comment">// a为1 b为2</span></span><br></pre></td></tr></table></figure>

<ul>
<li>默认值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [ a=<span class="string">"默认值"</span> ] = [];</span><br><span class="line"><span class="comment">// 没有匹配到值时,(即undefined), a为"默认值"</span></span><br><span class="line"><span class="keyword">let</span> [ a=<span class="string">"默认值"</span> ] = [<span class="string">"新值"</span>];</span><br><span class="line"><span class="comment">// 有东西可以匹配时, 取新赋予的值, a为"新值"</span></span><br></pre></td></tr></table></figure>

<h3 id="展开运算符-…"><a href="#展开运算符-…" class="headerlink" title="展开运算符 …"></a>展开运算符 …</h3><ul>
<li>把数组展开</li>
<li>把类数组变成数组</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [a,b] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]</span><br><span class="line"><span class="comment">// a为1, b为数组[2,3,4,5]</span></span><br></pre></td></tr></table></figure>

<ul>
<li>不定参<br>当不知道数据的长度时</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 当不知道传给fn的数据的长度时</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">...arr</span>)</span>&#123;</span><br><span class="line">	<span class="comment">// 得到一个arr数组</span></span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="number">1</span>,<span class="number">2</span>,<span class="string">"3"</span>,[<span class="number">4</span>,<span class="number">5</span>],&#123;<span class="attr">a</span>:<span class="number">7</span>&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>交换值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>, b = <span class="number">2</span>;</span><br><span class="line">[ a, b ]= [ b, a ]</span><br><span class="line"><span class="comment">// a为 2, b为 1</span></span><br></pre></td></tr></table></figure>

<ul>
<li>复制数组 – 浅拷贝<ul>
<li>内部数据一样</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">2</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,a,<span class="string">"xxx"</span>,&#123;<span class="attr">name</span>:<span class="string">"Tom"</span>&#125;,[<span class="number">3</span>,<span class="number">4</span>]];</span><br><span class="line"><span class="keyword">let</span> arr2 = [...arr];</span><br><span class="line"><span class="comment">// 改变aar2, 不会改变arr</span></span><br><span class="line"><span class="built_in">console</span>.log(arr[n]===arr2[n]) <span class="comment">// 都是true</span></span><br></pre></td></tr></table></figure>

<ul>
<li>展开字符串变成一个数组</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[....<span class="string">"abcde"</span>]</span><br></pre></td></tr></table></figure>

<h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="字符串方法"><a href="#字符串方法" class="headerlink" title="字符串方法"></a>字符串方法</h3><h4 id="str1-includes-str2"><a href="#str1-includes-str2" class="headerlink" title="str1.includes(str2)"></a>str1.includes(str2)</h4><p>在str1中查找str2, 有返回true, 没有返回false</p>
<h4 id="str1-startsWith-str2"><a href="#str1-startsWith-str2" class="headerlink" title="str1.startsWith(str2)"></a>str1.startsWith(str2)</h4><p>检查str2是否为str1的开头部分, 是返回true, 不是返回false</p>
<h4 id="str1-endsWith-str2"><a href="#str1-endsWith-str2" class="headerlink" title="str1.endsWith(str2)"></a>str1.endsWith(str2)</h4><p>检查str2是否为str1的结尾部分, 是返回true, 不是返回false</p>
<h4 id="str-repeat-n"><a href="#str-repeat-n" class="headerlink" title="str.repeat(n)"></a>str.repeat(n)</h4><p>返回一个新字符串, 其内容为重复str字符串n次</p>
<h4 id="str1-padStart-num-str2"><a href="#str1-padStart-num-str2" class="headerlink" title="str1.padStart(num,str2)"></a>str1.padStart(num,str2)</h4><p>返回一个新字符串, 其内容为向str1前面补(num-str1.length)个str2, 使其长度为num</p>
<ul>
<li>num小于str1时, 返回str1原字符串</li>
<li>str2项可以不要, 默认补空格</li>
</ul>
<h4 id="str1-padEnd-num-str2"><a href="#str1-padEnd-num-str2" class="headerlink" title="str1.padEnd(num,str2)"></a>str1.padEnd(num,str2)</h4><p>返回一个新字符串, 其内容为向str1后面补(num-str1.length)个str2, 使其长度为num</p>
<h3 id="字符串模板"><a href="#字符串模板" class="headerlink" title="字符串模板 ``"></a>字符串模板 ``</h3><ul>
<li>可以换行</li>
<li>引用变量${}</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">"Tom"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`我是<span class="subst">$&#123;name&#125;</span>`</span>); <span class="comment">//打印我是Tom</span></span><br></pre></td></tr></table></figure>

<ul>
<li>另类调用函数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log<span class="string">`嘿嘿嘿`</span>; <span class="comment">// 打印一个数组, 第一项为嘿嘿嘿字符串</span></span><br></pre></td></tr></table></figure>

<h3 id="数字方法"><a href="#数字方法" class="headerlink" title="数字方法"></a>数字方法</h3><h4 id="Number-isFinite-xxx"><a href="#Number-isFinite-xxx" class="headerlink" title="Number.isFinite(xxx)"></a>Number.isFinite(xxx)</h4><p>检测xxx是否为一个有限的数值</p>
<ul>
<li>没有隐式类型转换</li>
<li>xxx为字符串时返回false</li>
</ul>
<h4 id="Number-isNaN-xxx"><a href="#Number-isNaN-xxx" class="headerlink" title="Number.isNaN(xxx)"></a>Number.isNaN(xxx)</h4><p>检测xxx是否为NaN</p>
<ul>
<li>没有隐式类型转换</li>
<li>xxx为字符串时返回false</li>
</ul>
<h4 id="Infinity-正无穷大"><a href="#Infinity-正无穷大" class="headerlink" title="Infinity 正无穷大"></a>Infinity 正无穷大</h4><h4 id="Infinity-负无穷大"><a href="#Infinity-负无穷大" class="headerlink" title="-Infinity 负无穷大"></a>-Infinity 负无穷大</h4><h4 id="Number-parseInt-str"><a href="#Number-parseInt-str" class="headerlink" title="Number.parseInt(str)"></a>Number.parseInt(str)</h4><p>从开头取str的整数部分</p>
<ul>
<li>与原parseInt(str)一样</li>
<li>会进行类型转换</li>
</ul>
<h4 id="Number-parseFloat-str"><a href="#Number-parseFloat-str" class="headerlink" title="Number.parseFloat(str)"></a>Number.parseFloat(str)</h4><p>从开头取str的数字部分</p>
<h4 id="Math-cbrt-num"><a href="#Math-cbrt-num" class="headerlink" title="Math.cbrt(num)"></a>Math.cbrt(num)</h4><p>求立方根</p>
<h4 id="Math-hypot-num1-num2"><a href="#Math-hypot-num1-num2" class="headerlink" title="Math.hypot(num1,num2)"></a>Math.hypot(num1,num2)</h4><p>求num1, num2的平方和的平方根, 勾股定理</p>
<h4 id="指数运算符"><a href="#指数运算符" class="headerlink" title="指数运算符 **"></a>指数运算符 **</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">2</span>**<span class="number">4</span>; <span class="comment">// a = 16</span></span><br></pre></td></tr></table></figure>

<h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><h4 id="默认值"><a href="#默认值" class="headerlink" title="默认值"></a>默认值</h4><ul>
<li>没有默认值时, 参数是使用var声明的</li>
<li>有默认值时, 参数是使用let声明的</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x, y=<span class="string">"默认值"</span> </span>)</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="string">"x的值"</span>) <span class="comment">// 不给y传值时使用默认值</span></span><br></pre></td></tr></table></figure>

<h4 id="解构传值"><a href="#解构传值" class="headerlink" title="解构传值"></a>解构传值</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">&#123;x, y=<span class="number">3</span> &#125;</span>)</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line">fn(&#123;x=<span class="number">1</span>&#125;)</span><br><span class="line">fn() <span class="comment">// 不传值报错</span></span><br><span class="line"><span class="comment">// 改成这样则不传值时不报错</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">&#123;x, y=<span class="number">3</span>&#125; = &#123;&#125;</span>)</span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h4><ul>
<li>本质上是一个表达式</li>
<li>没有this, this默认指向父级对象</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fn = <span class="function"><span class="params">x</span> =&gt;</span> x;</span><br><span class="line"><span class="comment">// 等同于</span></span><br><span class="line"><span class="keyword">let</span> fn = <span class="function"><span class="keyword">function</span>(<span class="params">x</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> x</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>我发现当自执行函数放在fn()执行后面时, 会报错, fn()的执行必须在自执行函数的后面</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="keyword">this</span>) <span class="comment">// 指向window</span></span><br><span class="line">&#125;)()</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="keyword">this</span>) <span class="comment">// 指向window</span></span><br><span class="line">&#125;</span><br><span class="line">fn()</span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">	fn1: &#123;</span><br><span class="line">		fn1: <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="keyword">this</span>) <span class="comment">// 指向fn1</span></span><br><span class="line">		&#125;,</span><br><span class="line">		fn2: <span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="keyword">this</span>) <span class="comment">// 指向window</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	fn2: <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="keyword">this</span>) <span class="comment">// 指向obj</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.fn1.fn1()</span><br><span class="line">obj.fn1.fn2()</span><br><span class="line">obj.fn2()</span><br></pre></td></tr></table></figure>

<ul>
<li><p>bind/call/apply 对箭头函数无效</p>
</li>
<li><p>不能使用arguments, 不定参使用…</p>
</li>
</ul>
<h3 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h3><h4 id="Array-from-xxx"><a href="#Array-from-xxx" class="headerlink" title="Array.from(xxx)"></a>Array.from(xxx)</h4><p>将一个类数组转换为真的数组</p>
<h4 id="Array-of"><a href="#Array-of" class="headerlink" title="Array.of()"></a>Array.of()</h4><p>创建数组</p>
<h4 id="find"><a href="#find" class="headerlink" title="find()"></a>find()</h4><p>返回第一个符合条件的值</p>
<h4 id="findInedx"><a href="#findInedx" class="headerlink" title="findInedx()"></a>findInedx()</h4><p>返回第一个符合条件的值的下标, 没有返回-1</p>
<h4 id="fill-xxx"><a href="#fill-xxx" class="headerlink" title="fill(xxx)"></a>fill(xxx)</h4><p>用xxx填充数组</p>
<h4 id="for-of"><a href="#for-of" class="headerlink" title="for of"></a>for of</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">"a"</span>,<span class="string">"b"</span>,<span class="string">"c"</span>]</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">of</span> arr)&#123;</span><br><span class="line">	<span class="comment">// key为arr的值</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> arr)&#123;</span><br><span class="line">	<span class="comment">// key为arr的下标</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="includes"><a href="#includes" class="headerlink" title="includes()"></a>includes()</h4><ul>
<li>数组也可以使用</li>
</ul>
<h3 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h3><h4 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h4><ul>
<li>简洁表示法</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="string">"123"</span>;</span><br><span class="line"><span class="comment">// es5的写法</span></span><br><span class="line"><span class="keyword">let</span> data = &#123;</span><br><span class="line">	a: a,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// es6简写</span></span><br><span class="line"><span class="keyword">let</span> data = &#123;</span><br><span class="line">	a,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>属性获取以及添加</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> data = &#123;&#125;</span><br><span class="line">data.a = <span class="number">1</span>;</span><br><span class="line">data[b] = <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> fn = <span class="string">"objFunction"</span>;</span><br><span class="line"><span class="keyword">let</span> n = <span class="string">"name"</span>;</span><br><span class="line"><span class="keyword">let</span> data1 = &#123;</span><br><span class="line">	<span class="comment">// 把objFunction做函数名</span></span><br><span class="line">	[fn]()&#123;&#125;,</span><br><span class="line">	<span class="comment">// 把name做键名</span></span><br><span class="line">	[n]: shellingfordly</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(data1.name); <span class="comment">// shellingfordly</span></span><br></pre></td></tr></table></figure>

<h4 id="函数-1"><a href="#函数-1" class="headerlink" title="函数"></a>函数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// es5的写法</span></span><br><span class="line"><span class="keyword">let</span> data = &#123;</span><br><span class="line">	fn: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// es6简写</span></span><br><span class="line"><span class="keyword">let</span> data = &#123;</span><br><span class="line">	fn()&#123;&#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="Object-is"><a href="#Object-is" class="headerlink" title="Object.is"></a>Object.is</h4><p>判断是否相等</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">NaN</span> === <span class="literal">NaN</span> <span class="comment">// false</span></span><br><span class="line"><span class="built_in">Object</span>.is(<span class="literal">NaN</span>, <span class="literal">NaN</span>) <span class="comment">// true</span></span><br><span class="line">+<span class="number">0</span> === <span class="number">-0</span> <span class="comment">// true</span></span><br><span class="line"><span class="built_in">Object</span>.is(+<span class="number">0</span>, <span class="number">-0</span>) <span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<h4 id="Object-assign-obj1-obj2-obj3"><a href="#Object-assign-obj1-obj2-obj3" class="headerlink" title="Object.assign(obj1, obj2, obj3)"></a>Object.assign(obj1, obj2, obj3)</h4><ul>
<li>把后面两个对象填充到obj1中并返回obj1对象</li>
<li>相同属性会被后者覆盖</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj1 = &#123;<span class="attr">a</span>:<span class="number">1</span>&#125;</span><br><span class="line"><span class="keyword">let</span> obj2 = &#123;<span class="attr">b</span>:<span class="number">1</span>&#125;</span><br><span class="line"><span class="keyword">let</span> obj3 = &#123;<span class="attr">c</span>:<span class="number">1</span>&#125;</span><br><span class="line"><span class="built_in">Object</span>.assign(obj1, obj2, obj3) <span class="comment">// obj1 = &#123;a:1, b:2, c:3&#125;</span></span><br></pre></td></tr></table></figure>

<h4 id="Object"><a href="#Object" class="headerlink" title="Object"></a>Object</h4><p>都返回一个数组</p>
<ul>
<li>Object.keys() 键名<ul>
<li>键名数组</li>
</ul>
</li>
<li>Object.values() 键值<ul>
<li>键值数组</li>
</ul>
</li>
<li>Object.entries() 键值对<ul>
<li>键值对二维数组</li>
</ul>
</li>
</ul>
<h4 id="展开运算符…"><a href="#展开运算符…" class="headerlink" title="展开运算符…"></a>展开运算符…</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123;a, b, x&#125; = &#123;<span class="attr">a</span>:<span class="number">1</span>, <span class="attr">b</span>:<span class="number">2</span>, <span class="attr">c</span>:<span class="number">3</span>, <span class="attr">d</span>:<span class="number">4</span>&#125;</span><br><span class="line"><span class="comment">// x = &#123;c:3, d:4&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="对象拷贝"><a href="#对象拷贝" class="headerlink" title="对象拷贝"></a>对象拷贝</h3><ul>
<li>浅拷贝<br>引用型数据拷贝时，其指向还是原来的数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1 = [&#123;<span class="attr">name</span>: <span class="string">"xxx"</span>&#125;]</span><br><span class="line"><span class="keyword">let</span> arr2 = [&#123;<span class="attr">age</span>: <span class="string">"22"</span>&#125;]</span><br><span class="line"><span class="keyword">let</span> arr3 = a1.concat(a2);</span><br><span class="line">a3[<span class="number">0</span>].name = <span class="string">"yyy"</span>; <span class="comment">// 会改变arr1中的值</span></span><br></pre></td></tr></table></figure>

<ul>
<li>判断一个对象是否是数组<ul>
<li>Array.isArray(obj);  不兼容IE9及以下</li>
<li>obj instanceof Array  判断obj是否有Array的原型</li>
<li>length &amp;&amp; join &amp;&amp; constructor === Array</li>
</ul>
</li>
</ul>
<ul>
<li>深拷贝</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj1 = &#123; <span class="attr">a</span>: &#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">extend</span>(<span class="params">obj, deep</span>)</span>&#123;	<span class="comment">// deep 判断是否深拷贝，默认浅拷贝</span></span><br><span class="line">	<span class="comment">// 空对象，存拷贝数组；判断类型，初始化为[]或者&#123;&#125;</span></span><br><span class="line">	<span class="keyword">let</span> newObj = obj <span class="keyword">instanceof</span> <span class="built_in">Array</span>? [] : &#123;&#125;;</span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> obj)&#123;</span><br><span class="line">		<span class="keyword">let</span> val = obj[key];</span><br><span class="line">		<span class="keyword">if</span>(deep &amp;&amp; <span class="keyword">typeof</span> val === <span class="string">"object"</span>)&#123;</span><br><span class="line">			<span class="comment">// 深拷贝，判断当前取到的obj[key]属性是否是一个数组或&#123;&#125;</span></span><br><span class="line">			<span class="comment">// 注：typeof 判断数组和&#123;&#125;时返回值都为object</span></span><br><span class="line">			<span class="comment">// 递归判断val中的val.....是否为数组或&#123;&#125;</span></span><br><span class="line">			newObj[key] = extend(val, deep);</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			<span class="comment">// 浅拷贝</span></span><br><span class="line">			newObj[key] = val;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">return</span> newObj;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 浅拷贝</span></span><br><span class="line"><span class="keyword">let</span> obj2 = extend(obj1);</span><br><span class="line"><span class="comment">// 深拷贝</span></span><br><span class="line"><span class="keyword">let</span> obj2 = extend(obj1, <span class="literal">true</span>);</span><br></pre></td></tr></table></figure>

<h3 id="Symbol"><a href="#Symbol" class="headerlink" title="Symbol"></a>Symbol</h3><p>新的数据类型</p>
<ul>
<li>避开属性名冲突</li>
<li>独一无二的值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="built_in">Symbol</span>(<span class="number">123</span>)</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">Symbol</span>(<span class="number">123</span>)</span><br><span class="line"><span class="built_in">console</span>.log( a === b ); <span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<ul>
<li>只能将其转成字符串和布尔值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="built_in">Symbol</span>(<span class="number">123</span>)</span><br><span class="line"><span class="built_in">console</span>.log( <span class="built_in">Boolean</span>(a) ); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log( <span class="built_in">String</span>(a) ); <span class="comment">// 字符串"Symbol(123)"</span></span><br></pre></td></tr></table></figure>

<ul>
<li>作为对象属性名时，只能用[]，不能使用 . 操作</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="built_in">Symbol</span>()</span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">	[a]: <span class="number">123</span>, <span class="comment">// 通过obj[a]获取</span></span><br><span class="line">	a: <span class="string">"xxx"</span>, <span class="comment">// 通过obj.a获取</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>用for in遍历时找不到Symbol创建的属性名</li>
<li>将对象中所有Symbol的属性名以数组形式返回<ul>
<li>Reflect.ownKeys(obj)</li>
<li>Object.getOwnPropertySymbols(obj)</li>
</ul>
</li>
</ul>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/weixin.jpg" alt="shellingford ly 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/zhifubao.jpg" alt="shellingford ly 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/js/" rel="tag"># js</a>
          
            <a href="/tags/es6/" rel="tag"># es6</a>
          
        </div>
      

      
      
        <div class="post-widgets">
        

        

        
          
          <div id="needsharebutton-postbottom">
            <span class="btn">
              <i class="fa fa-share-alt" aria-hidden="true"></i>
            </span>
          </div>
        
        </div>
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/10/03/面向对象编程/" rel="next" title="面向对象编程">
                <i class="fa fa-chevron-left"></i> 面向对象编程
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/10/04/HTML5/" rel="prev" title="HTML5">
                HTML5 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/uploads/images/header.jpg" alt="shellingford ly">
            
              <p class="site-author-name" itemprop="name">shellingford ly</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">12</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                
                  <span class="site-state-item-count">15</span>
                  <span class="site-state-item-name">分类</span>
                
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                
                  <span class="site-state-item-count">18</span>
                  <span class="site-state-item-name">标签</span>
                
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/shellingfordly" target="_blank" title="github">
                      
                        <i class="fa fa-fw fa-github"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://gitee.com/shellingfordly" target="_blank" title="码云">
                      
                        <i class="fa fa-fw fa-maxcdn"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/shellingfordly" target="_blank" title="微博">
                      
                        <i class="fa fa-fw fa-weibo"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.cnblogs.com/shellingfordly" target="_blank" title="博客园">
                      
                        <i class="fa fa-fw fa-rss"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:shellingfordly@qq.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://space.bilibili.com/288333302" target="_blank" title="bilibili">
                      
                        <i class="fa fa-fw fa-globe"></i></a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#变量声明"><span class="nav-number">1.</span> <span class="nav-text">变量声明</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#声明方式"><span class="nav-number">1.1.</span> <span class="nav-text">声明方式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#es5"><span class="nav-number">1.1.1.</span> <span class="nav-text">es5</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#es6"><span class="nav-number">1.1.2.</span> <span class="nav-text">es6</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#区别"><span class="nav-number">1.1.3.</span> <span class="nav-text">区别</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#作用域"><span class="nav-number">1.2.</span> <span class="nav-text">作用域</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常量"><span class="nav-number">1.3.</span> <span class="nav-text">常量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解构模式"><span class="nav-number">1.4.</span> <span class="nav-text">解构模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#展开运算符-…"><span class="nav-number">1.5.</span> <span class="nav-text">展开运算符 …</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#方法"><span class="nav-number">2.</span> <span class="nav-text">方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#字符串方法"><span class="nav-number">2.1.</span> <span class="nav-text">字符串方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#str1-includes-str2"><span class="nav-number">2.1.1.</span> <span class="nav-text">str1.includes(str2)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#str1-startsWith-str2"><span class="nav-number">2.1.2.</span> <span class="nav-text">str1.startsWith(str2)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#str1-endsWith-str2"><span class="nav-number">2.1.3.</span> <span class="nav-text">str1.endsWith(str2)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#str-repeat-n"><span class="nav-number">2.1.4.</span> <span class="nav-text">str.repeat(n)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#str1-padStart-num-str2"><span class="nav-number">2.1.5.</span> <span class="nav-text">str1.padStart(num,str2)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#str1-padEnd-num-str2"><span class="nav-number">2.1.6.</span> <span class="nav-text">str1.padEnd(num,str2)</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#字符串模板"><span class="nav-number">2.2.</span> <span class="nav-text">字符串模板 ``</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数字方法"><span class="nav-number">2.3.</span> <span class="nav-text">数字方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Number-isFinite-xxx"><span class="nav-number">2.3.1.</span> <span class="nav-text">Number.isFinite(xxx)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Number-isNaN-xxx"><span class="nav-number">2.3.2.</span> <span class="nav-text">Number.isNaN(xxx)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Infinity-正无穷大"><span class="nav-number">2.3.3.</span> <span class="nav-text">Infinity 正无穷大</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Infinity-负无穷大"><span class="nav-number">2.3.4.</span> <span class="nav-text">-Infinity 负无穷大</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Number-parseInt-str"><span class="nav-number">2.3.5.</span> <span class="nav-text">Number.parseInt(str)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Number-parseFloat-str"><span class="nav-number">2.3.6.</span> <span class="nav-text">Number.parseFloat(str)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Math-cbrt-num"><span class="nav-number">2.3.7.</span> <span class="nav-text">Math.cbrt(num)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Math-hypot-num1-num2"><span class="nav-number">2.3.8.</span> <span class="nav-text">Math.hypot(num1,num2)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#指数运算符"><span class="nav-number">2.3.9.</span> <span class="nav-text">指数运算符 **</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数"><span class="nav-number">2.4.</span> <span class="nav-text">函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#默认值"><span class="nav-number">2.4.1.</span> <span class="nav-text">默认值</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#解构传值"><span class="nav-number">2.4.2.</span> <span class="nav-text">解构传值</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#箭头函数"><span class="nav-number">2.4.3.</span> <span class="nav-text">箭头函数</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组"><span class="nav-number">2.5.</span> <span class="nav-text">数组</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Array-from-xxx"><span class="nav-number">2.5.1.</span> <span class="nav-text">Array.from(xxx)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Array-of"><span class="nav-number">2.5.2.</span> <span class="nav-text">Array.of()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#find"><span class="nav-number">2.5.3.</span> <span class="nav-text">find()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#findInedx"><span class="nav-number">2.5.4.</span> <span class="nav-text">findInedx()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#fill-xxx"><span class="nav-number">2.5.5.</span> <span class="nav-text">fill(xxx)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#for-of"><span class="nav-number">2.5.6.</span> <span class="nav-text">for of</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#includes"><span class="nav-number">2.5.7.</span> <span class="nav-text">includes()</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对象"><span class="nav-number">2.6.</span> <span class="nav-text">对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#属性"><span class="nav-number">2.6.1.</span> <span class="nav-text">属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#函数-1"><span class="nav-number">2.6.2.</span> <span class="nav-text">函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Object-is"><span class="nav-number">2.6.3.</span> <span class="nav-text">Object.is</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Object-assign-obj1-obj2-obj3"><span class="nav-number">2.6.4.</span> <span class="nav-text">Object.assign(obj1, obj2, obj3)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Object"><span class="nav-number">2.6.5.</span> <span class="nav-text">Object</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#展开运算符…"><span class="nav-number">2.6.6.</span> <span class="nav-text">展开运算符…</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对象拷贝"><span class="nav-number">2.7.</span> <span class="nav-text">对象拷贝</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Symbol"><span class="nav-number">2.8.</span> <span class="nav-text">Symbol</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">shellingford ly</span>

  
</div>


  <div class="powered-by">
  <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>
  </div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info"> 
  <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">
  NexT</a>
  </div>




<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">33.7k</span>
</div>

        
<div class="busuanzi-count">
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    
      <div id="needsharebutton-float">
        <span class="btn">
          <i class="fa fa-share-alt" aria-hidden="true"></i>
        </span>
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: 'Cs5UqCDDJC5JezlK5wuzf2ql-gzGzoHsz',
        appKey: 'TC9fgcijHIjkjEwwCz6aQSJi',
        placeholder: '说点什么呢...',
        avatar:'monsterid',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  
  
  <link rel="stylesheet" href="/lib/needsharebutton/needsharebutton.css">

  
  
  <script src="/lib/needsharebutton/needsharebutton.js"></script>

  <script>
    
      pbOptions = {};
      
          pbOptions.iconStyle = "box";
      
          pbOptions.boxForm = "horizontal";
      
          pbOptions.position = "bottomCenter";
      
          pbOptions.networks = "Weibo,Wechat,QQZone,Facebook";
      
      new needShareButton('#needsharebutton-postbottom', pbOptions);
    
    
      flOptions = {};
      
          flOptions.iconStyle = "box";
      
          flOptions.boxForm = "horizontal";
      
          flOptions.position = "middleRight";
      
          flOptions.networks = "Weibo,Wechat,QQZone,Facebook";
      
      new needShareButton('#needsharebutton-float', flOptions);
    
  </script>

  

  

  

  

</body>
</html>
